<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: transparent;
        }
        .zf-icon {
            width: 0.24rem;
            height: 0.24rem;
            background-size: 0.24rem 0.24rem;
        }
        .zf-text {
            font-size: 0.14rem;
            color: #26344C;
            margin-left: 0.12rem;
        }
        .zf-button {
            width: 0.21rem;
            height: 0.21rem;
            border-radius: 0.105rem;
            background-size: 0.21rem 0.21rem;
            background-image: url("../../image/my/zf-button.png");
        }
        .zf-button-active {
            width: 0.21rem;
            height: 0.21rem;
            border-radius: 0.105rem;
            background-size: 0.21rem 0.21rem;
            background-image: url("../../image/my/zf-button-active.png");
        }
    </style>
</head>
<body>
    <div class="flex" style="width: 100%; height: 1.00rem; justify-content: center; align-items: center;">
        <p id="price" style="font-size: 0.30rem; font-weight: 600; color: #26344C"></p>
    </div>
    <div id="product-block" class="flex" style="width: 100%; flex-wrap: wrap; justify-content: center;">
        <div id="product-list" style="width: 3.43rem; height: 1.30rem; background-color: #FFFFFF; border-radius: 0.06rem;">
            <div class="flex" style="width: 100%; height: 0.65rem; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE; justify-content: space-between; align-items: center;">
                <div class="flex" style="align-items: center; margin-left: 0.16rem;">
                    <div class="zf-icon" style="background-image: url('../../image/my/zf-wx.png')"></div>
                    <p class="zf-text">微信支付</p>
                </div>
                <div class="flex" style="justify-content: center; align-items: center; width: 0.56rem; height: 0.65rem;" tapmode onclick="changePay('wx')">
                    <div id="wx-button" class="zf-button-active"></div>
                </div>
            </div>
            <div class="flex" style="width: 100%; height: 0.65rem; justify-content: space-between; align-items: center;">
                <div class="flex" style="align-items: center; margin-left: 0.16rem;">
                    <div class="zf-icon" style="background-image: url('../../image/my/zf-zfb.png')"></div>
                    <p class="zf-text">支付宝支付</p>
                </div>
                <div class="flex" style="justify-content: center; align-items: center; width: 0.56rem; height: 0.65rem;" tapmode onclick="changePay('zfb')">
                    <div id="zfb-button" class="zf-button"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: 0.45rem; margin-top: 0.70rem; justify-content: center;">
        <div style="width: 2.97rem; height: 0.45rem; border-radius: 0.28rem; font-size: 0.15rem; line-height: 0.45rem; color: #FFFFFF; text-align: center; background-color: #A0522C" tapmode onclick="createOrder()">确认支付</div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var priceEl, wxButtonEl, zfbButton;
    var zfType;
    apiready = function () {
        zfType = "WECHAT";
        priceEl = $api.byId('price');
        wxButtonEl = $api.byId('wx-button');
        zfbButton = $api.byId('zfb-button');
        $api.text(priceEl, "¥" + api.pageParam.real_price);
    }

    function changePay(type) {
        switch(type)
        {
            case "wx":
                zfType = "WECHAT";
                $api.removeCls(wxButtonEl, "zf-button");
                $api.addCls(wxButtonEl, "zf-button-active");
                $api.removeCls(zfbButton, "zf-button-active");
                $api.addCls(zfbButton, "zf-button");
                break;
            case "zfb":
                zfType = "ALIPAY";
                $api.removeCls(zfbButton, "zf-button");
                $api.addCls(zfbButton, "zf-button-active");
                $api.removeCls(wxButtonEl, "zf-button-active");
                $api.addCls(wxButtonEl, "zf-button");
                break;
        }
    }

    function createOrder() {
        api.ajax({
            url: apiUrl + '/buy/create-order',
            tag: '/buy/create-order',
            // method: 'post',
            // data: {
            //     values: {
            //         token: $api.getStorage("token"),
            //         device_type: api.systemType,
            //         product_id: api.pageParam.product_id
            //     }
            // }

            method: 'post',
            headers: {
                "Content-Type": "application/json",
            },
            data: {
                body: {
                    token: $api.getStorage("token"),
                    device_type: api.systemType,
                    product_id: api.pageParam.product_id
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    payOrder(ret.data.order_id);
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function payOrder(orderId) {
        api.ajax({
            url: apiUrl + '/pay/prepay',
            tag: '/pay/prepay',
            // method: 'post',
            // data: {
            //     values: {
            //         token: $api.getStorage("token"),
            //         device_type: api.systemType,
            //         trade_channel: zfType,
            //         trade_type: "APP",
            //         product_id: orderId,
            //     }
            // }

            method: 'post',
            headers: {
                "Content-Type": "application/json",
            },
            data: {
                body: {
                    token: $api.getStorage("token"),
                    device_type: api.systemType,
                    trade_channel: zfType,
                    trade_type: "APP",
                    order_id: orderId,
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    payWx(ret.data)
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function payWx(wxPayConfig) {
        alert("ddd")
        // alert(wxPayConfig.nonceStr);
        var wxPay = api.require('wxPay');
        wxPay.payOrder({
            apiKey: wxPayConfig.appid,
            orderId: wxPayConfig.prepay_id,
            mchId: wxPayConfig.partnerid,
            nonceStr: wxPayConfig.noncestr,
            timeStamp: wxPayConfig.timestamp,
            package: wxPayConfig.package,
            sign: wxPayConfig.sign,
        }, function(ret, err) {
            console.log(JSON.stringify(ret))
            console.log(JSON.stringify(err))
            if (ret.status) {
                openMemberSuccessWin();
            } else {
                api.toast({
                    msg: "支付失败",
                    duration: 2000,
                    location: 'middle'
                });
            }
        });
    }

    function openMemberSuccessWin() {
        api.openWin({
            name: 'memberSuccessWin',
            url: './memberSuccessWin.html',
            slidBackType: 'edge',
            // pageParam: {
            //     product_id: productList[index]["product_id"],
            //     real_price: productList[index]["real_price"],
            // },
            animation: {
                type:"movein",
                subType:"from_right",
                duration:300
            }
        });
    }
</script>
